<template>
    <el-scrollbar class="playlist-items">
        <TransitionGroup name="list-scale" tag="div">
            <playlist-item
                v-for="(index, i) in playlist.indexes"
                :key="index"
                :index="i"
                :item="playlist.items[index]"
                :selected="selected.has(i)"
                :focused="playlist.focus === i"
                :playing="playlist.player.state === PlayState.Play"
                @update:selected="(value: boolean) => (value ? selected.add(i) : selected.delete(i))"
                @toggle-play="emits('togglePlay', i)"
                @move-up="emits('moveUp', i)"
                @move-down="emits('moveDown', i)"
                @remove="emits('remove', i)"
            ></playlist-item>
        </TransitionGroup>
    </el-scrollbar>
</template>

<script setup lang="ts">
import { PropType } from "vue";
import { Playlist, PlayState, type PlaylistObject } from "@/lib/playlist";

defineProps({
    playlist: {
        type: Object as PropType<PlaylistObject>,
        default: () => Playlist.object(),
    },
    selected: {
        type: Object as PropType<Set<number>>,
        required: true,
    },
});

const emits = defineEmits<{
    (event: "togglePlay", index: number): void;
    (event: "moveUp", index: number): void;
    (event: "moveDown", index: number): void;
    (event: "remove", index: number): void;
}>();
</script>

<style scoped lang="scss">
.playlist-items {
    margin: 0 8px;
}
</style>
